/* eslint-disable import/no-anonymous-default-export */
import React from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import Home from '../../../pages/Home/index'
import LIstFound from '../../../pages/LIstFound'
import My from '../../../pages/My'
import NotFound from '../../../pages/404/NotFound'
import styles from './demo2.module.css'

const Bottom = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    // 这里是点击可以拿到路由名称
    console.log('====================================');
    console.log(value);
    console.log('====================================');
    history.push(value)
  }

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon:  'iconfont icon-index',
    },
    {
      key: '/home/list',
      title: '找房',
      icon: 'iconfont icon-findHouse',
    },
    {
      key: '/home/profile',
      title: '我的',
      icon: 'iconfont icon-my',
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key}  icon={<i className={item.icon} />}  title={item.title} />
      ))}
    </TabBar>
  )
}

export default () => {
  return (
    <Router initialEntries={['/home']}>
      <div className={styles.app}>
        <div className={styles.top}>
          <NavBar>配合路由使用</NavBar>
        </div>
        <div className={styles.body}>
          <Switch>
            <Route exact path='/home'>
              <Home />
            </Route>
            <Route exact path='/home/list'>
              <LIstFound />
            </Route>
            <Route exact path='/home/profile'>
              <My />
            </Route>
            <Route component={NotFound}></Route>
          </Switch>
        </div>
        <div className={styles.bottom}>
          <Bottom />
        </div>
      </div>
    </Router>
  )
}
